<template>
	<view class="y-flex"
	:style="componentStyle">
		<find-search-input :value="value" :options="{
			enableSearch: 1,
			placeholder: '输入关键词搜索'
		}" :bgColor="componentStyle['background-color']" @input="handleInput" @confirm="handleConfirm" />
	</view>
</template>

<script>
	import { pixelunit, hexToRgba } from '@/assets/js/util.js'
	import FindSearchInput from './findModule/FindSearchInput.vue'
	export default {
		inject: ['getComponentStyle'],
		components: {FindSearchInput},
		props: {
			value: {
				type: String,
				default: ''
			},
			marginGap: {
				type: [Number, String],
				default: ''
			}
		},
		computed: {
			componentStyle () {
				const style = this.getComponentStyle()
				return {
					'margin-top': pixelunit(style.marginTop),
					'margin-bottom': pixelunit(30),
					'margin-left': pixelunit(style.marginLeft),
					'margin-right': pixelunit(style.marginRight),
					'background-color': hexToRgba(style.backgroundColor, style.backgroundOpacity),
					'border-radius': pixelunit(style.borderRadius)
				}
			},
		},
		methods: {
			handleInput (value) {
				this.$emit('input', value)
			},
			handleConfirm (keyword) {
				this.$emit('input', keyword)
				this.$emit('confirm')
			},
			handleClear () {
				this.$emit('input', '')
			},
			_pixelunit (size) {
				return pixelunit(size)
			}
		}
	}
</script>

<style>
</style>